<template>
    <!-- 标签栏 -->
    <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange" color="#fba12f" title-active-color="#fba12f"
        background="#f7f7f7">
        <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key"></van-tab>
    </van-tabs>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <!-- 加载列表 -->
        <van-list v-model:loading="loading" :finished="finished" :offset="10" finished-text="没有更多了" @load="OnLoad">
            <div class="list">
                <!-- 商品卡片 -->
                <div class="item" v-for="item in list" :key="item.id">

                    <div class="header">
                        <div class="code">订单号：{{ item.code }}</div>
                        <div class="status">{{ item.status_text }}</div>
                    </div>

                    <van-card :thumb="item.product.products.thumb_text" @click="OnOpenProductCard(item.order_product)">
                        <template #title>
                            <div class="title">{{ item.product.products.name }}</div>
                        </template>

                        <!-- 卡片的插槽部分 -->
                        <template #desc v-if="item.product.attrs">
                            <van-tag v-for="(attr, index) in JSON.parse(item.product.attrs)" :key="index" class="tag"
                                type="primary">{{ attr.value }}</van-tag>
                        </template>

                        <!-- 卡片的插槽部分 -->
                        <template #desc v-else>
                            <van-tag class="tag" type="danger">无商品规格</van-tag>
                        </template>

                        <template #price>
                            <div class="price-box">
                                <div class="price">商品总价：￥ {{ item.product.total }}</div>
                                <div class="num">x{{ item.product.pronum }}</div>
                            </div>
                        </template>
                    </van-card>

                    <div class="footer">

                        <div class="box">

                            <div class="time">
                                下单时间：{{ item.createtime_text }}
                            </div>

                            <div class="total">
                                <div class="coupon" v-if="item.couponid">优惠：￥ {{ item.coupon_price }}</div>
                                <div>实付款：￥ {{ item.amount }}</div>
                            </div>
                        </div>

                        <div class="btn-list">
                            <!-- status = 1 仅退款 -->
                            <van-button v-if="item.status == '1'" class="button" type="danger" size="mini"
                                @click="OnRefund1(item.id)">申请退款</van-button>
                            <van-button v-if="item.status == '2'" class="button" type="danger" size="mini"
                                @click="OnRefund2(item.id)">申请退货退款</van-button>

                            <!-- status = 2 -->
                            <van-button v-if="item.status == '2'" class="button" type="success" size="mini"
                                @click="OnConfirmReceive(item.id)">确认收货</van-button>
                            <van-button v-if="item.status == '2'" class="button" type="warning"
                                size="mini">物流详情</van-button>

                            <!-- status = 3 已收货 -->
                            <van-button v-if="item.status == '3'" class="button" type="warning" size="mini"
                                @click="ToOrderInfo(item.id)">立即评价</van-button>

                            <!-- 退货退款 -->
                            <van-button v-if="item.status == '-2'" class="button" type="success"
                                size="mini">等待后台审核...</van-button>
                            <van-button v-if="item.status == '-3'" class="button" type="warning" size="mini"
                                @click="ToBackIndex">请填写退货信息</van-button>

                            <van-button class="button" type="primary" size="mini"
                                @click="ToOrderInfo(item.id)">订单详情</van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

    <!-- 仅退款弹框 -->
    <van-popup v-model:show="ApplyShow1" position="bottom" round :style="{ paddingBottom: '20px' }">
        <van-picker title="退款原因" :columns="RemarkList" @cancel="ApplyShow1 = false" @confirm="OnRefundApply" />
    </van-popup>

    <!-- 退货退款的弹框 -->
    <van-popup v-model:show="ApplyShow2" position="bottom" round>
        <van-form @submit="OrderApplyConfirm">
            <van-field v-model="remark" name="remark" rows="5" autosize type="textarea" maxlength="120"
                placeholder="请输入申请原因" show-word-limit :rules="[{ required: true, message: '请填写申请原因' }]" />
            <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit"
                @click="OnRefund">提交申请</van-button>
        </van-form>
    </van-popup>

    <!-- 商品列表弹出框 -->
    <van-popup v-model:show="ProductShow" position="bottom" round style="padding: 10px 0;">
        <van-card v-for="item in ProductList" :thumb="item.products.thumb_text" :num="item.pronum">
            <template #title>
                <div class="title">{{ item.products.name }}</div>
            </template>

            <!-- 卡片的插槽部分 -->
            <template #desc v-if="item.attrs">
                <van-tag v-for="(attr, index) in JSON.parse(item.attrs)" :key="index" class="tag" type="primary">{{
                    attr.value }}</van-tag>
            </template>

            <template #desc v-else>
                <van-tag class="tag" type="danger">无规格数据</van-tag>
            </template>

            <template #tags>
                <div class="price">单价：￥{{ item.price }}</div>
            </template>

            <template #price>
                <div class="price">合计：￥{{ item.total }}</div>
            </template>
        </van-card>

        <div style="width:80%;margin:1em auto 0em;">
            <van-button round block type="primary" @click="ProductShow = false">关闭</van-button>
        </div>
    </van-popup>

    <Tabbar />
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 标签栏数据
const StatusActive = ref('all')
const StatusList = ref([
    { title: '全部', value: 'all' },
    { title: '已支付', value: '1' },
    { title: '已发货', value: '2' },
    { title: '已收货', value: '3' },
    { title: '已完成', value: '4' },
    { title: '退货退款', value: '-1' },
]);

// 用户登录信息
const business = proxy.$business;

// 下拉刷新的数据
const list = ref([]);// 数据列表
const page = ref(1); // 分页
const loading = ref(false);// 加载状态
const finished = ref(false);// 是否无更多数据
const refreshing = ref(false);// 下拉刷新

// 申请仅退款
const orderid = ref(0);
const ApplyShow1 = ref(false);
const RemarkList = ref([
    { text: '拍错了', value: '拍错了' },
    { text: '地址有误', value: '地址有误' },
    { text: '不想要了', value: '不想要了' },
    { text: '参数选错了', value: '参数选错了' },
    { text: '选择其他的', value: '选择其他的' },
]);

// 退货退款 
const ApplyShow2 = ref(false);
const remark = ref('');

// 商品列表弹出显示
const ProductShow = ref(false);
const ProductList = ref([]);

// 标签栏切换
const TabChange = debounce(({ name }) => {
    OnRefresh();
}, 800)

// 下拉刷新
const OnRefresh = async () => {
    page.value = 1;
    list.value = [];
    finished.value = false;
    loading.value = true;

    setTimeout(OnLoad, 1500);
}

const OnLoad = async () => {
    const params = {
        busid: business.value.id,
        page: page.value,
        status: StatusActive.value
    }

    const result = await proxy.$http.post({
        url: '/order/index',
        params
    })

    loading.value = false;

    if (result.code === 1) {
        let count = result.data.count;
        list.value = list.value.concat(result.data.list);

        list.value.map(item => {
            item.product = item.order_product[0] ?? null;

            if (item.couponid) {
                let amount = 0;

                item.order_product.map(product => {
                    amount += parseFloat(product.total);
                })

                item.coupon_price = (amount - parseFloat(item.amount)).toFixed(2);
            }

        })

        if (list.value.length >= count) {
            finished.value = true;

            return false;
        }

        page.value += 1;

    } else {
        finished.value = true;
    }
}

// 点击card组件可以查看当前订单购买的商品
const OnOpenProductCard = (item) => {
    ProductList.value = item;

    ProductShow.value = true;
}

// 仅退款
const OnRefund1 = (id) => {
    proxy.$confirm({
        title: '申请退款',
        message: '是否确认申请退款?'
    }).then(async () => {
        ApplyShow1.value = true;
        orderid.value = id;
    }).catch(err => { })
}

// 确认收货
const OnConfirmReceive = (orderid) => {
    proxy.$confirm({
        title: '确认收货',
        message: '是否确认收货',
    }).then(async () => {
        let result = await proxy.$http.post({
            url: 'order/receive',
            params: {
                orderid,
                busid: business.value.id
            }
        })
        if (result.code === 1) {
            proxy.$success(result.msg);
            OnRefresh();
        } else {
            proxy.$fail(result.msg);
        }
    })
}

// 退货退款
const OnRefund2 = async (id) => {
    proxy.$confirm({
        title: '申请退款',
        message: '是否确认申请退款?'
    }).then(async () => {
        ApplyShow2.value = true;
        orderid.value = id;
    }).catch(err => { })
}
const OrderApplyConfirm = async () => {
    if (!remark.value.trim()) {
        proxy.$toast('请填写申请原因')
        return
    }

    let params = {
        'orderid': orderid.value,
        'busid': business.value.id,
        'remark': remark.value
    }

    let result = await proxy.$http.post({
        url: '/order/refund',
        params
    })

    if (result.code === 1) {
        proxy.$success({
            message: result.msg,
            onClose: () => {
                ApplyShow2.value = false
                OnRefresh()
            }
        })
    } else {
        proxy.$fail({
            message: result.msg,
            onClose: () => {
                ApplyShow2.value = false
                OnRefresh()
            }
        })
    }
}

// 申请仅退款
const OnRefundApply = async (values) => {

    let result = await proxy.$http.post({
        url: '/order/refundreason',
        params: {
            'refundreason': values.selectedValues[0],
            'busid': business.value.id,
            'orderid': orderid.value,
        }
    })

    if (result.code === 1) {
        proxy.$success({
            message: result.msg,
            onClose: () => {
                ApplyShow1.value = false
                OnRefresh()
            }
        })
    } else {
        proxy.$fail({
            message: result.msg,
            onClose: () => {
                ApplyShow1.value = false
                OnRefresh()
            }
        })
    }
}

// 跳转订单详情
const ToOrderInfo = (orderid) => proxy.$router.push({ path: '/order/info', query: { orderid } })

// 跳转到退货物流页面
const ToBackIndex = (orderid) => proxy.$router.push({ path: '/order/back', query: { orderid } })
</script>


<style scoped>
@import url('/assets/css/OrderIndex.css');
</style>